import { count, log } from "node:console";
import { url } from "node:inspector";
import React, { Component } from "react";
type inpType = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
interface iState {
  count: number;
}
interface iProps {
  name: string;
}

class Header extends Component{
  state: iState = {
    count: 100  }

  render(): React.ReactNode {
    
    return<>
    <header>头部组件--{this.state.count}</header>
    </>
  }
}

function Content(){
  return <>
    <main>只要肯吃苦</main>
  </>
}


export default class App extends Component {
  state: iState = {
    count: 100,
  };

  //将ref设置到html标签时，ref代表当前标签
  h1ref = React.createRef<HTMLHeadingElement>();
  headerRef=React.createRef<Header>();
  // contentRef=React.createRef<Content>();
 //会在组件挂载和更新阶段执行
  render() {
    console.log("render");
    return (
      <div>
        <h1 ref={this.h1ref}>父组件</h1>
        <button onClick={()=>{
          // console.log(this.h1ref.current?.innerText);
          console.log(this.headerRef.current);
          this.headerRef.current?.setState({
            count:666
          })
          
        }}>点击获取</button>

        <Header ref={this.headerRef}></Header>
        {/* 函数组件不能直接设置ref */}
        {/* <Content ref={this.contentRef}></Content> */}
      </div>
    );
  }

}
